<template>
  <div class="home" style="padding: 10px">
    <!-- 搜索-->
    <div style="margin: 10px 0">
      <el-form inline="true" size="small">
        <el-form-item label="isbn号">
          <el-input v-model="query.licensePlate" placeholder="请输入isbn号" clearable>
            <template #prefix>
              <el-icon class="el-input__icon">
                <search />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="书名">
          <el-input v-model="query.model" placeholder="请输入书名" clearable>
            <template #prefix>
              <el-icon class="el-input__icon">
                <search />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="作者">
          <el-input v-model="query.manufacturer" placeholder="请输入作者" clearable>
            <template #prefix>
              <el-icon class="el-input__icon">
                <search />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="margin-left: 1%" @click="load" size="mini">
            <svg-icon iconClass="search" />查询
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="danger" @click="clear">重置</el-button>
        </el-form-item>
        <el-form-item style="float: right" v-if="numOfOutDataCar != 0">
          <el-popconfirm confirm-button-text="查看" cancel-button-text="取消" :icon="InfoFilled" icon-color="red"
            title="您有图书已逾期，请尽快归还" @confirm="toLook">
            <template #reference>
              <el-button type="warning">逾期通知</el-button>
            </template>
          </el-popconfirm>
        </el-form-item>
      </el-form>
    </div>
    <!-- 按钮-->
    <div style="margin: 10px 0">
      <el-button type="primary" @click="add" v-if="user.role == 1">上架</el-button>
<!--      <el-popconfirm title="确认删除?" @confirm="deleteBatch" v-if="user.role == 1">-->
<!--        <template #reference>-->
<!--          <el-button type="danger" size="mini">批量删除</el-button>-->
<!--        </template>-->
<!--      </el-popconfirm>-->
    </div>
    <!-- 数据字段-->
    <el-table :data="tableData" stripe :border="true" @selection-change="handleSelectionChange">
      <el-table-column v-if="user.role == 1" type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="图书编号" sortable width="100" />
      <el-table-column prop="licensePlate" label="isbn号" />
      <el-table-column prop="model" label="书名" />
      <el-table-column prop="manufacturer" label="作者" />
      <el-table-column prop="pricePerDay" label="价格" sortable width="70" />
      <el-table-column prop="user.nickName" label="借书人" />
      <el-table-column prop="status" label="状态">
        <template v-slot="scope">
          <el-tag v-if="scope.row.status == '0'" type="warning">已租借</el-tag>
          <el-tag v-else type="success">未租借</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template v-slot="scope">
          <el-button size="mini" @click="handleEdit(scope.row)" v-if="user.role == 1">修改</el-button>
          <el-popconfirm title="确认删除?" @confirm="handleDelete(scope.row.id)" v-if="user.role == 1">
            <template #reference>
              <el-button type="danger" size="mini">删除</el-button>
            </template>
          </el-popconfirm>
          <el-button type="primary" size="mini" @click="handleLend(scope.row.id, scope.row.id, scope.row.model)"
            v-if="user.role == 2" :disabled="scope.row.status == 0">租借</el-button>
          <el-popconfirm title="确认还书?" @confirm="handleReturn(scope.row.id, scope.row)" v-if="user.role == 2"
            :disabled="scope.row.status == 1">
            <template #reference>
              <el-button type="danger" size="mini" :disabled="
                scope.row.status == 1
                ">还书</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 逾期详情对话框-->
    <el-dialog v-model="dialogVisible3" v-if="numOfOutDataCar != 0" title="逾期详情" width="50%"
      :before-close="handleClose">
      <el-table :data="outDateCar" style="width: 100%">
        <el-table-column prop="carId" label="图书编号" />
        <el-table-column prop="carName" label="图书名称" />
        <el-table-column prop="lendTime" label="租借日期" />
        <el-table-column prop="deadTime" label="截至日期" />
      </el-table>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="dialogVisible3 = false">确认</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 分页-->
    <div style="margin: 10px 0">
      <el-pagination v-model:currentPage="currentPage" :page-sizes="[5, 10, 20]" :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange"></el-pagination>
      <!-- 上架车辆对话框-->
      <el-dialog v-model="dialogVisible" title="上架图书" width="30%">
        <el-form :model="form" label-width="120px">
          <el-form-item label="图书编号">
            <el-input style="width: 80%" v-model="form.id"></el-input>
          </el-form-item>
          <el-form-item label="isbn号">
            <el-input style="width: 80%" v-model="form.licensePlate"></el-input>
          </el-form-item>
          <el-form-item label="图书名">
            <el-input style="width: 80%" v-model="form.model"></el-input>
          </el-form-item>
          <el-form-item label="作者">
            <el-input style="width: 80%" v-model="form.manufacturer"></el-input>
          </el-form-item>
          <el-form-item label="价格">
            <el-input style="width: 80%" v-model="form.pricePerDay"></el-input>
          </el-form-item>
          <el-form-item label="出版年份">
            <el-input style="width: 80%" v-model="form.productionYear"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="save">确定</el-button>
          </span>
        </template>
      </el-dialog>
      <!-- 修改车辆信息对话框-->
      <el-dialog v-model="dialogVisible2" title="修改图书信息" width="30%">
        <el-form :model="form" label-width="120px">
          <el-form-item label="图书编号">
            <el-input style="width: 80%" v-model="form.id"></el-input>
          </el-form-item>
          <el-form-item label="isbn号">
            <el-input style="width: 80%" v-model="form.licensePlate"></el-input>
          </el-form-item>
          <el-form-item label="书名">
            <el-input style="width: 80%" v-model="form.model"></el-input>
          </el-form-item>
          <el-form-item label="作者">
            <el-input style="width: 80%" v-model="form.manufacturer"></el-input>
          </el-form-item>
          <el-form-item label="价格">
            <el-input style="width: 80%" v-model="form.pricePerDay"></el-input>
          </el-form-item>
          <el-form-item label="出版年份">
            <el-input style="width: 80%" v-model="form.productionYear"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible2 = false">取消</el-button>
            <el-button type="primary" @click="save">确定</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import request from "../utils/request";
import {
  ElMessage
} from "element-plus";
import moment from "moment";

export default {
  created() {
    let userStr = sessionStorage.getItem("user") || "{}";
    this.user = JSON.parse(userStr);
    // this.user.role = 1
    this.load();
  },
  name: "Car",
  methods: {

    handleSelectionChange(val) {
      this.ids = val.map((v) => v.id);
    },
    deleteBatch() {
      if (!this.ids.length) {
        ElMessage.warning("请选择数据！");
        return;
      }
      request.post("/car/deleteBatch", this.ids).then((res) => {
        if (res.code === "0") {
          ElMessage.success("批量删除成功");
          this.load();
        } else {
          ElMessage.error(res.msg);
        }
      });
    },
    async load() {
      this.numOfOutDataCar = 0;
      this.outDateCar = [];
      const queryDto = {
        licensePlate: this.query.licensePlate,
        model: this.query.model,
        manufacturer: this.query.manufacturer,
        status: this.query.status
      };

      let url = "/cars/number/" + this.currentPage + "/size/" + this.pageSize;
      let res = await request.post(url, this.query);
      console.log("res is ", res)
      console.log("data is ", res.data)
      this.tableData = res.data;
      this.total = res.data.length;

      if (this.user.role == 2) {
        let url2 = "/carwithuser/number/" + this.currentPage +
          "/size/" + this.pageSize
        // + "/userId/" + this.user.id;
        let res2 = await request.post(url2, {})
        this.carData = res2.data.list;
        this.number = this.carData.length;
        var nowDate = new Date();
        this.carIdArray = new Map();
        for (let i = 0; i < this.number; i++) {
          this.carIdArray.set(this.carData[i].carId, this.carData[i].userId);
          let dDate = new Date(this.carData[i].rentalEnd);
          console.log("dDate is ", dDate, nowDate)
          if (dDate < nowDate) {
            this.outDateCar[this.numOfOutDataCar] = {
              carId: this.carData[i].carId,
              carName: this.carData[i].car.model,
              deadTime: this.carData[i].rentalEnd,
              lendTime: this.carData[i].rentalStart,
            };
            this.numOfOutDataCar = this.numOfOutDataCar + 1;
          }
        }
      }
    },
    clear() {
      // this.search1 = "";
      // this.search2 = "";
      // this.search3 = "";
      this.query = {}
      this.load();
    },
    handleDelete(id) {
      request.delete("/cars/delete/" + id).then((res) => {
        if (res.status == 200) {
          ElMessage.success("删除成功");
        } else ElMessage.error(res.msg);
        this.load();
      });
    },
    async handleReturn(id, row) {
      this.form = {
        ...row
      };
      this.form.status = "1";
      this.form.id = id;
      const res = await request.post("/cars/return/", null, {
        params: {
          CarId: id
        }
      });
      if (res.status == 200) {
        ElMessage({
          message: "还车成功",
          type: "success",
        });
        await this.load();
      } else {
        ElMessage.error(res.message);
      }
    },
    async handleLend(id, carId, name) {
      if (this.number == 5) {
        ElMessage.warning("您不能再租借更多的车辆了");
        return;
      }
      if (this.numOfOutDataCar != 0) {
        ElMessage.warning("在您归还逾期车辆前不能再租借车辆");
        return;
      }
      this.form.status = "0";
      this.form.id = id;
      const requestData = {
        carId: id,
        userId: this.user.id,
        rentalStart: new Date().toISOString(),  // 转换为ISO格式字符串
        rentalEnd: new Date(new Date().setDate(new Date().getDate() + 30)).toISOString()
      };
      // 更新车辆状态
      const updateData = {
        id: id,
        status: "0"  // 设置为已租借状态
      };
      // 发送请求
      const res = await request.post("/cars/rent/", requestData, {
        headers: {
          'Content-Type': 'application/json'  // 明确指定JSON内容类型
        }
      });
      // 后端需要完成功能， 修改 car 表， insert 一条记录到 rent表
      if (res.status == 200) {
        ElMessage({
          message: "租借成功",
          type: "success",

        });
        await this.load();
      } else {
        ElMessage.error(res.message);
      }

      // this.form2.status = "0";
      // this.form2.carId = carId;
      // this.form2.carName = name;
      // this.form2.userId = this.user.id;
      // this.form2.status = 0;
      // let startDate = moment(new Date()).format("yyyy-MM-DD HH:mm:ss");
      // this.form2.rentalStart = startDate;
      // request.post("/RentalRecord", this.form2).then((res) => {
      //   this.load();
      // });
      // let form3 = {};
      // form3.carId = carId;
      // form3.carName = name;
      // form3.nickName = this.user.username;
      // form3.userId = this.user.id;
      // let nowDate = new Date(startDate);
      // nowDate.setDate(nowDate.getDate() + 30);
      // form3.rentalStart = moment(nowDate).format("yyyy-MM-DD HH:mm:ss");
      // form3.extensionCount = 1;
      // request.post("/carwithuser/insertNew", form3).then((res) => {
      //   this.load();
      // });
    },
    add() {
      this.dialogVisible = true;
      this.form = {};
    },
    save() {
      console.log(this.form); // 打印请求数据
      console.log("打印form id"+this.form.id)
      if (this.form.productionYear) {
        this.form.productionYear = moment(this.form.productionYear).format(
          "YYYY"
        );
      }
      if (this.form.id) {
        request.put("/cars/update/", this.form).then((res) => {
          if (res.status == 200) {
            ElMessage({
              message: "修改车辆信息成功",
              type: "success",
            });
          } else {
            ElMessage.error(res.msg);
          }
          this.load();
          this.dialogVisible2 = false;
        });
      } else {
        this.form.status = 1;
        request.post("/cars/add/", this.form).then((res) => {
          if (res.status == 200) {
            ElMessage.success("上架车辆成功");
          } else {
            ElMessage.error(res.msg);
          }
          this.load();
          this.dialogVisible = false;
        });
      }
    },
    handleEdit(row) {
      this.form = JSON.parse(JSON.stringify(row));
      this.dialogVisible2 = true;
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.load();
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.load();
    },
    toLook() {
      this.dialogVisible3 = true;
    },
  },
  data() {
    return {
      form: {},
      form2: {},
      form3: {},
      dialogVisible: false,
      dialogVisible2: false,
      query: {},
      // search1: "",
      // search2: "",
      // search3: "",
      total: 10,
      currentPage: 1,
      pageSize: 10,
      tableData: [],
      user: {},
      number: 0,
      carData: [],
      carIdArray: new Map(),
      outDateCar: [],
      numOfOutDataCar: 0,
      dialogVisible3: true,
    };
  },
};
</script>
